<route lang="json5" type="page">
{
    layout: "default",
    style: {
        navigationBarTitleText: "用户中心",
    },
}
</route>

<template>
    <view class="m-base-box m-user-center">
        <view class="u-bg h-[200px] w-[100%]">
            <image src="/src/static/mp-weixin/images/userbg.png" mode="scaleToFill" class="w-[100%] h-[100%]" />
        </view>
        <view class="u-top flex flex-col items-center justify-center gap-8 px-4">
            <view class="u-avatar">
                <wd-img
                    :src="userInfo?.avatar"
                    mode="aspectFill"
                    :width="100"
                    :height="100"
                    :enable-preview="true"
                    round
                    v-if="isLogined && userInfo?.avatar"
                >
                    <template #error>
                        <view class="w-[100%]">
                            <image src="/src/static/mp-weixin/images/avatar.jpg" mode="scaleToFill" />
                        </view>
                    </template>
                    <template #loading>
                        <view class="flex justify-center items-center w-[100%] min-h-[200rpx]">
                            <wd-loading />
                        </view>
                    </template>
                </wd-img>
                <image
                    src="/src/static/mp-weixin/images/avatar.jpg"
                    mode="scaleToFill"
                    v-else
                    style="width: 100px; height: 100px; border-radius: 50%"
                />
            </view>
            <view
                class="flex gap-8 items-center justify-center w-[100%]"
                style="box-sizing: border-box; padding: 10px 20px; background-color: #ffffff; border-radius: 10px"
            >
                <view class="u-info flex flex-col items-start justify-center gap-1" v-if="isLogined">
                    <view class="flex items-center gap-2">
                        <wd-text :text="userInfo?.name ?? '微信用户'" size="16px" bold color="#000"></wd-text>
                        <wd-tag type="primary" mark>{{ userType == "fz" ? "分销商" : "普通用户" }}</wd-tag>
                    </view>
                    <wd-text :text="userInfo?.id" size="12px" color="#000" prefix="No." v-if="userInfo?.id"></wd-text>
                    <view
                        class="mt-[2px] flex items-center"
                        v-if="userInfo?.userType === 'fz' || userType == 'fz'"
                        @click="switchRole"
                    >
                        <wd-icon name="translate-bold" size="22px"></wd-icon>
                        <wd-text text="切换角色" size="12px" color="#000"></wd-text>
                    </view>
                </view>
                <view class="u-info flex flex-col items-start justify-center gap-4" v-else>
                    <wd-text text="尚未登录" size="16px" bold color="#000"></wd-text>
                </view>
                <view class="u-setting" v-if="isLogined">
                    <navigator url="/pages/user/setting" hover-class="navigator-hover">
                        <wd-icon name="setting" size="22px"></wd-icon>
                    </navigator>
                </view>
            </view>
        </view>
        <view class="mt-4 m-config-list">
            <wd-card title="基本功能">
                <view class="pb-4">
                    <wd-cell-group border>
                        <wd-cell title="我的订单" icon="spool" is-link clickable @click="toOrder"> </wd-cell>
                        <wd-cell
                            title="邀请用户"
                            icon="usergroup-add"
                            is-link
                            clickable
                            @click="toYqUser"
                            v-if="userType == 'fz'"
                        ></wd-cell>
                        <wd-cell
                            title="邀请下级分销"
                            icon="transfer"
                            is-link
                            clickable
                            @click="toFxUser"
                            v-if="userType == 'fz' && userInfo?.parentId == 0"
                        ></wd-cell>
                        <wd-cell
                            title="分销订单"
                            icon="list"
                            is-link
                            clickable
                            @click="toFxOrder"
                            v-if="userType == 'fz'"
                        ></wd-cell>

                        <wd-cell title="关于我们" icon="error-circle" label="本地旅游综合汇聚平台"></wd-cell>
                    </wd-cell-group>
                </view>
            </wd-card>
        </view>
        <wd-fab position="right-bottom" :expandable="false">
            <template #trigger>
                <wd-button open-type="contact" @contact="wxContact" icon="service" size="medium">客服</wd-button>
            </template>
        </wd-fab>
    </view>
</template>

<script lang="ts" setup>
import { useUserStore } from "@/store/user";
import { getUserInfoUsingGet, wxLoginUsingPost, wxMaLoginUsingPost } from "@/service/app";
import { useToast } from "wot-design-uni";
const toast = useToast();
const userStore = useUserStore();
const isLogined = computed(() => {
    return userStore.isLogined;
});
const userInfo = ref({});
const userType = computed(() => {
    return userStore.userType;
});
function toYqUser() {
    uni.navigateTo({
        url: "/pages/user/invitation/index",
    });
}
function toFxUser() {
    uni.navigateTo({
        url: "/pages/user/invitation/fx",
    });
}

function switchRole(r) {
    toast.loading({
        loadingType: "ring",
        msg: "加载中...",
    });
    uni.login({
        provider: "weixin",
        onlyAuthorize: true,
        success: function (res) {
            console.log(res);
            if (userType.value == "fz") {
                wxMaLoginUsingPost({ body: { code: res.code } }).then((res) => {
                    toast.close();
                    userStore.clearUserInfo();
                    userStore.setToken(res?.data);
                    uni.switchTab({
                        url: "/pages/index/index",
                    });
                });
            } else {
                wxLoginUsingPost({ body: { code: res.code } }).then((res) => {
                    toast.close();
                    userStore.clearUserInfo();
                    userStore.setUserType("fz");
                    userStore.setToken(res?.data?.token as string);
                    userStore.setUserInfo(res?.data?.user);
                    uni.switchTab({
                        url: "/pages/index/index",
                    });
                });
            }
        },
    });
}

function toFxOrder() {
    uni.navigateTo({
        url: "/pages/user/order/fxOrder",
    });
}
function toOrder() {
    uni.navigateTo({
        url: "/pages/user/order/order",
    });
}
function getUserInfo() {
    if (userStore.userInfo?.id) return (userInfo.value = userStore.userInfo);
    toast.loading({
        loadingType: "ring",
        msg: "加载中...",
    });
    getUserInfoUsingGet({}).then((res) => {
        toast.close();
        userStore.setUserInfo(res?.data);
        userInfo.value = res?.data;
    });
}
function wxContact(e) {
    console.log(e);
}
onShow(() => {
    getUserInfo();
});
</script>

<style lang="scss" scoped>
.m-user-center {
    position: relative;
    .u-bg {
        position: absolute;
        z-index: 0;
    }
    .u-top {
        position: absolute;
        top: 30px;
        z-index: 2;
        box-sizing: border-box;
        width: 100%;
    }
    .m-config-list {
        position: absolute;
        top: 260px;
        z-index: 2;
        width: 100%;
    }
}
</style>
